<template>
  <div class="article-container">
    <el-card class="filter-card">
      <div slot="header">
        <!-- 面包屑路径导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- /面包屑路径导航 -->
      </div>
      <!-- 数据筛选表单 -->
      <el-form ref="form" :model="form" label-width="40px" size="mini">
        <el-form-item label="状态">
          <el-radio-group v-model="form.resource">
            <el-radio label="全部"></el-radio>
            <el-radio label="草稿"></el-radio>
            <el-radio label="待审核"></el-radio>
            <el-radio label="审核通过"></el-radio>
            <el-radio label="审核失败"></el-radio>
            <el-radio label="已删除"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道">
          <el-select v-model="form.region" placeholder="请选择频道">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="form.date1"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['12:00:00']">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- /数据筛选表单 -->
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        根据筛选条件共查询到 {{ total_count }} 条结果：
      </div>
      <!-- 数据列表 -->
      <el-table :data="articles" style="width: 100%">
        <el-table-column label="封面">
          <template v-slot="scope">
            <el-image style="width: 100px; height: 100px" :src="scope.row.cover.images[0]">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题">
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
              <el-tag v-if="scope.row.status===0" type="info">草稿</el-tag>
              <el-tag v-else-if="scope.row.status===1" type="success">待审核</el-tag>
              <el-tag v-else-if="scope.row.status===2">审核通过</el-tag>
              <el-tag v-else-if="scope.row.status===3" type="warning">审核失败</el-tag>
              <el-tag v-else-if="scope.row.status===4" type="danger">已删除</el-tag>
              <el-tag v-else type="danger">unknow</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="pubdate" label="发布时间">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!--scope.row:表示这一行的数据 ; scope.$index: 表示这一行的索引-->
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="hEdit(scope.$index, scope.row)">
            </el-button>

            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="hDelete(scope.$index, scope.row)">
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- /数据列表 -->

      <!-- 列表分页 -->
      <el-pagination
          background
          layout="prev, pager, next"
          :page-size="10"
          @current-change="hPageChange"
          :total="total_count">
        </el-pagination>
      <!-- /列表分页 -->
    </el-card>
  </div>
</template>

<script>
import { getArticles } from '@/api/articles.js'
export default {
  name: 'ArticleIndex',
  components: {},
  props: {},
  data () {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      articles: [], // 文章列表
      total_count: 0, // 当前查询能查到的总条数
      page: 1 // 当前要查询的页码
    }
  },
  computed: {},
  watch: {},
  async created () {
    const { data: res } = await getArticles({
      page: this.page
    })
    console.log(res)
    this.total_count = res.data.total_count
    this.articles = res.data.results
  },
  mounted () {},
  methods: {
    onSubmit () {
      console.log('submit!')
    },
    hEdit (index, row) {
      console.log(index, row)
    },
    hDelete (index, row) {
      console.log(index, row)
    },
    hPageChange (curPage) {
      console.log('点击了分页', curPage)
      // 1. 更新页码
      this.page = curPage

      // 重发请求
      this.getArticles()
    }
  }
}
</script>

<style scoped lang="less">
.filter-card {
  margin-bottom: 30px;
}

.list-table {
  margin-bottom: 20px;
}
</style>
